
.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
	display:flex;
}
body{
	background:#f0f0f0;
	
	.hinder {
			position:fixed;
			z-index:2;
			width:100%;
			top:0;
			left:0;
			img{
				width:100%;
				display:block;
				}
		}
	.heade{
		.Flex;
		justify-content:space-between;
		position:fixed;
		z-index:2;
		top:0;
		left:0;
		width:100%;
		.PxToRem(padding-top,40);
		.PxToRem(height,88);
		color: #ffffff;
		div{
			p{
				text-align:center;
				.PxToRem(font-size,30);
				.PxToRem(margin-bottom,26);
			}
			span{
				.PxToRem(font-size,20);

			}
			&.left {
				.PxToRem(width,88);
				img{
					display: block;
					height: 50%;
					margin: 25% auto;
				}
			}
			&.right {
				.PxToRem(width,88);
				img{
					display: block;
					height: 50%;
					margin: 25% auto;
				}
			}
		}	
	}

.main{
	padding-top:31%;
	padding-bottom:15%;
	.nav{
		.PxToRem(height,85);
		background:#ffffff;
		border-bottom:1px solid #cccccc;
		p{
		   .PxToRem(font-size,26);
			color:#27c1b4;
			.PxToRem(line-height,85);
			.PxToRem(margin-left,20);
			}
		
		}
		.box{
			background:#ffffff;
			.PxToRem(padding-left,20);	
			.PxToRem(padding-right,20);
			.PxToRem(margin-bottom,15);
			height:auto;	
			li{
				.Flex;
				justify-content:space-between;
				list-style:none;
				
				.PxToRem(padding-top,20);
				.PxToRem(padding-bottom,10);
				.left{
					.PxToRem(padding-left,30);
					 background:url(../img/03_rot.png) no-repeat left;
					 .PxToRem(font-size,26);
					}
				p.as{background:url(../img/g_03up.png) no-repeat center;}
				.right{
					background:url(../img/02down.png) no-repeat center;
					.PxToRem(width,30);
		  		 	.PxToRem(height,15);
					}
				.right:hover{
						cursor:pointer;										
					}	
				}
			 .small{
		  		 background:#f3f3f3;
		  		 padding:2%;
		  		 display:none;
		  		 .PxToRem(margin-top,5);
		  		 .PxToRem(height,804);
		  		 .img{position:relative;
		  		 	 .PxToRem(top,-35); 
		  		 	 .PxToRem(left,40); 
		  		 	}
		  		 .up{
		  		 		
		  		 	dt img{.PxToRem(width,297);
		  		 		   .PxToRem(height,195);
		  		 			}
		  		 	dd{
		  		 		.PxToRem(font-size,22);
		  		 		.PxToRem(margin-top,15);
		  		 		.PxToRem(margin-bottom,15);
		  		 		}
		  		   }
		  		ul{
		  			border-top:1px solid #cccccc;
		  			border-bottom:1px solid #cccccc;
		  			li{.PxToRem(margin-top,10);}
		  			p{	
		  				.PxToRem(line-height,40);
		  				}
		  			h3{
		  				.PxToRem(margin-top,15);
		  		 		.PxToRem(margin-bottom,15);
		  			}	  			

		  		  }
		  		 .kdown{
		  		 		.PxToRem(width,156);
		  		 		.PxToRem(height,120);
		  		 		.PxToRem(margin-top,10);
		  		 		border:1px dashed #cccccc;
		  		 		background:#ffffff;
		  		 		dt,dd{text-align:center;}
		  		 		dt{
		  		 			.PxToRem(padding-top,20);
		  		 		}
		  		 		dd{
		  		 			.PxToRem(padding-top,20);
		  		 			color:#cccccc;
		  		 		}
		  		 }

			  }
			}	
		.Flow{
			padding:2%;
			background:#ffffff;
			heght:auto;
			dl{
				.Flex;
				dt{
					.PxToRem(width,30);
		  		 	.PxToRem(height,30);
		  		 	.PxToRem(border-radius,30);
		  		 	background:#27c1b4;
		  		 	color:#ffffff;
		  		 	text-align:center;
		  		 	.PxToRem(line-height,30);
				  }
				dd{
					color:#343434;
					.PxToRem(margin-left,30);
					.PxToRem(font-size,22);
				  }
			  }
			.detall{
					padding-left:6%;
		  		 	.PxToRem(padding-bottom,20);
		  		 	.PxToRem(width,640);
		  		 	.PxToRem(padding-top,10);
		  		 	word-break:break-word;
		  		 	border-left: 1px solid #27c1b4;
					margin-left:1.9%;
					p{
						.PxToRem(line-height,44);
						.PxToRem(font-size,22);
						a{color:#27c1b4;}
					 }
			      }		      

		}
}
		
	.Dfooter{
		.PxToRem(height,90);
		width:100%;
		background:#27c1b4;
		position:fixed;
		z-index:2;
		bottom:0;
		left:0;
		.show{
			text-align:center;
			.PxToRem(line-height,90);
			.PxToRem(font-size,25);
			color:#ffffff;
		}
	}
	
}




.msg{
    overflow:hidden;
    display:none;
	position:fixed;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	z-index:2;
	background:rgba(149,149,149,0.5);
	touch-action: none;
}
.msgSmall{
	position:absolute;
	z-index:10;
	background:#ffffff;
	.PxToRem(width,537);
	.PxToRem(height,560);
	top:25%;
	left:12%;
	.bgimg img{
	width:100%;
	display:block;
	}
	.dom{
		padding:3%;
		input{
			.PxToRem(width,476);
			.PxToRem(height,56);
			border:none;
			border:1px solid #cccccc;
			.PxToRem(border-radius,5);
			.PxToRem(padding-left,20);
			
			color:#cccccc;
		}
		input::-webkit-input-placeholder {color: #cccccc;}
		p{
			.PxToRem(line-height,40);
			color:#666666;
		}
		span{
			.PxToRem(line-height,40);
			color:#13d7c6;
		}
		button{
				.PxToRem(width,240);
				border:none;
				.PxToRem(height,60);
				.PxToRem(border-radius,5);
				border:1px solid #13d7c6;
				background:#ffffff;
				.PxToRem(margin-left,120);
		}
	}
}
.msgren{
	display:none;
	position:absolute;
	z-index:10;
	background:#ffffff;
	.PxToRem(width,537);
	.PxToRem(height,560);
	top:25%;
	left:12%;
	.bgimg img{
	width:100%;
	display:block;
	}
	.dom{
		padding:3%;
		
		p{
			.PxToRem(line-height,40);
			color:#666666;
		}
		span{
			.PxToRem(line-height,40);
			color:#13d7c6;
		}
		button{
				.PxToRem(width,240);
				border:none;
				.PxToRem(height,60);
				.PxToRem(border-radius,5);
				border:1px solid #13d7c6;
				background:#ffffff;
				.PxToRem(margin-left,120);
				.PxToRem(margin-top,20);
		}
	}
}





